<template>
  <div id="body">
    <van-nav-bar
      title="修改个人信息"
      left-text="返回"
      left-arrow
      right-text="保存"
      @click-left="$router.replace('/user')"
      @click-right="update"
    />

    <van-cell title="头像" is-link>
      <template #right-icon>
        <van-uploader
          style="height: 5em"
          v-model="fileList"
          :after-read="afterRead"
          max-count="1"
        />
      </template>
    </van-cell>
    <van-cell
      title="昵称"
      is-link
      :value="user.nickname"
      @click="isNickname = true"
    />
    <van-cell
      title="专业"
      is-link
      :value="user.majorName"
      @click="showPicker = true"
    />

    <van-dialog
      v-model="isNickname"
      title="昵称"
      confirm-button-color="#40C0C9"
      :before-close="checkNickname"
      show-cancel-button
    >
      <van-field v-model="tempNickname" placeholder="请输入用户名" />
      <span class="msg">{{ nicknameMsg }}</span>
    </van-dialog>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="configValue"
        :columns="majorList"
        @cancel="showPicker = false"
        @confirm="pickerConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "UserInfoPage",
  data() {
    return {
      fileList: [],
      showPicker: false,
      isNickname: false,
      nicknameMsg: "",
      tempNickname: "",
      user: {
        majorCode: "",
      },
      loginUser: {},
      majorList: [],
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      file.status = "uploading";
      file.message = "上传中";
      this.uploadFileRequest("/user/uploadAvatar", file).then((result) => {
        if (result && result.status == 200) {
          Toast.success("上传成功");
          file.status = "";
          file.message = "";
          file.url = result.data;
          this.user.avatar = result.data.data;
        } else {
          Toast.fail("上传失败");
        }
      });
    },
    update() {
      this.postRequest("/user/update", this.user).then((result) => {
        if (result.data.status == 200) {
          this.updateLoginUser();
          this.$router.replace("/user");
          Toast.success("修改成功");
        }
      });
    },
    updateLoginUser() {
      if (this.user.avatar && this.user.avatar.length > 0) {
        this.loginUser.avatar = this.user.avatar;
      }
      this.loginUser.nickname = this.user.nickname;
      this.loginUser.majorName = this.user.majorName;
      this.loginUser.majorCode = this.user.majorCode;
      localStorage.setItem("loginUser", JSON.stringify(this.loginUser));
    },
    listMajorConfig() {
      this.getRequest("/config/listChildByParentConfigName", {
        configName: this.CONFIG.MAJOR_CODE,
      }).then((res) => {
        this.majorList = res.data.data;
      });
    },
    pickerConfirm(value) {
      this.user.majorName = value.configValue;
      this.user.majorCode = value.configName;
      this.showPicker = false;
    },
    checkNickname(actions, done) {
      if (actions == "cancel") {
        this.tempNickname = this.user.nickname;
        done();
        return;
      }
      this.user.nickname = this.tempNickname;
      if (this.user.nickname.trim().length == 0) {
        this.nicknameMsg = "昵称不能为空";
        done(false);
        return;
      }
      if (this.user.nickname == this.loginUser.nickname) {
        done();
        return;
      }
      this.getRequest("/user/verifyNickname", {
        nickname: this.user.nickname,
      }).then((result) => {
        if (!result.data.data) {
          this.nicknameMsg = "昵称已存在";
          done(false);
          return;
        } else {
          this.nicknameMsg = "";
          done();
        }
      });
    },
  },
  created() {
    this.listMajorConfig();
    let loginUser = JSON.parse(localStorage.getItem("loginUser"));
    this.loginUser = loginUser;
    this.user.id = loginUser.id;
    this.user.nickname = loginUser.nickname;
    this.user.majorCode = loginUser.majorCode;
    this.user.majorName = loginUser.majorName;
    this.tempNickname = loginUser.nickname;
    if (loginUser.avatar && loginUser.avatar.length > 0) {
      this.fileList[0].url = loginUser.avatar;
    }
  },
};
</script>
<style scoped>
#body {
  background-color: #eaeaea;
}
.content {
  width: 100%;
  text-align: center;
}
</style>
